<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>课程-设置成绩占比</title>

<%@ include file="/common/commonLib.jsp"%>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/courseScoreIndex.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
<link rel=stylesheet href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="<c:url value='/js/course-index.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<c:url value='/js/taskCreat.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<c:url value='/js/courseScoreProportion.js'/>" type="text/javascript" charset="utf-8"></script>

</head>
<body>
	<div class="container-fluid main">
		<div class="row">
			<div class="col-md-12">
				<%@include file="/common/header.jsp"%>
			</div>
			<div class="col-md-12">
				<%@include file="common/courseHeader.jsp"%>
			</div>
			<div class="col-md-3">
				<%@include file="common/courseLeft.jsp"%>
			</div>
			<div class="col-md-9">
				<%@include file="common/courseNavbar.jsp"%>
			</div>
			<div class="col-md-9">
				<!-- 成绩占比-score-proportion -->
				<div class="score-proportion">
					<div class="row row-self"><!-- 标题头 -->
						<div class="col-md-1"></div>
						<div class="col-md-3">
							<div class="score-proportion-title">
								<h4>成绩占比</h4>
							</div>
						</div>
						<div class="col-md-4"></div>
						<div class="col-md-3"></div>
						<div class="col-md-1"></div>
					</div>
					<div class="row row-self progress-navigation"><!-- 进度导航 -->
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<!-- <div class="progress progress-self">
								<div id="progress-bar" class="bar" style="width:10%;">
								</div>
							</div> -->
							<div class="row">								
								<div class="col-md-4">
									<div class="step-title" >
										<img id="ttp-img" src="<c:url value='../image/mark.png'/>">
										<img src="<c:url value='../image/number_1.png'/>">
										<a id="task-type-proportion-btn" class="current-progress">各类成绩占比</a>
									</div>
								</div>						
								<div class="col-md-4">
									<div class="step-title">
										<img id="st-img" src="<c:url value='../image/noMark.png'/>">
										<img src="<c:url value='../image/number_2.png'/>">
										<a id="select-task-btn">选择任务</a>
									</div>
								</div>
								<div class="col-md-4">
									<div class="step-title" >
										<img id="tp-img" src="<c:url value='../image/noMark.png'/>">
										<img src="<c:url value='../image/number_3.png'/>">
										<a id="task-proportion-btn">所选任务占比</a>
									</div>
								</div>								
							</div>
						</div>
						<div class="col-md-1"></div>
					</div>
					<div id="task-type-proportion" class="row row-self" style="display:block;"><!-- 各类成绩-->
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<div class="row">
								<div class="col-md-12">
									<form class="form-horizontal-proportion">
										<div class="control-group">
											<label class="control-label" for="inputUsualGrade">平时成绩  <a style="font-size:1rem;">占比</a></label>
											<div class="controls">
												<input name="dailyGradeRatio" type="text" /> %
												<span class="note">*包括考勤成绩等(默认为课堂提问成绩)</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="inputTheoryGrade">理论成绩  <a style="font-size:1rem;">占比</a></label>
											<div class="controls">
												<input name="theoryGradeRatio" type="text" /> %
												<span class="note">*理论考试成绩</span>
											</div>											
										</div>
										<div class="control-group">
											<label class="control-label" for="inputExperimentGrade">实验成绩  <a style="font-size:1rem;">占比</a></label>
											<div class="controls">
												<input name="labGradeRatio" type="text" /> %
												<span class="note">*实验考试或者实验大作业成绩</span>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="inputTaskGrade">任务成绩  <a style="font-size:1rem;">占比</a></label>
											<div class="controls">
												<input name="taskGradeRatio" type="text" /> %
												<span class="note">*包括各类任务(课堂提问任务除外)</span>
											</div>
										</div>
									</form>
								</div>
							</div>
							<div class="control-group button-bar">
								<a id="ttp-last-btn" class="btn btn-warning bottom-btn-bar">返回</a>
								<a id="ttp-next-btn" class="btn btn-primary bottom-btn-bar">下一步</a>																	
							</div>
						</div>
						<div class="col-md-1"></div>
					</div>
					<div id="select-task" class="row row-self" style="display:none;"><!-- 待选任务列表 -->
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<div class="row">
								<div class="col-md-12">
									<table class="table">
										<thead>
											<tr>
												<th style="text-align:center;">
													任务类别
												</th>
												<th style="text-align:center;">
													任务信息
												</th>
											</tr>
										</thead>
										<tbody id="taskList">
											
										</tbody>
									</table>
								</div>
							</div>
							<div class="control-group button-bar">
								<a id="st-last-btn" class="btn btn-warning bottom-btn-bar">上一步</a>
								<a id="st-next-btn" class="btn btn-primary bottom-btn-bar">下一步</a>																	
							</div>
						</div>
						<div class="col-md-1"></div>
					</div>
					
					<div id="task-proportion" class="row row-self" style="display:none;"><!-- 已选任务列表 -->
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<div class="row">
								<div class="col-md-12">
									<table class="table">
										<thead>
											<tr>
												<th style="text-align:center;">
													任务类别
												</th>
												<th style="text-align:center;">
													任务信息
												</th>
											</tr>
										</thead>
										<tbody id="chooseTaskList">
											
										</tbody>
									</table>
								</div>
							</div>
							<div class="control-group button-bar">
								<a id="tp-last-btn" class="btn btn-warning bottom-btn-bar">上一步</a>
								<a id="tp-next-btn" class="btn btn-primary bottom-btn-bar">生成</a>																	
							</div>
						</div>
						<div class="col-md-1"></div>
					</div>					
				</div>
			</div>
		</div>
	</div>	
	<%@include file="/common/footer.jsp"%>
	<!-- 生成成绩确认页面 -->
	<div class="modal fade" id="ensure-build-score-layer">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header" style="text-align:center;">
					<h2 class="modal-title" style="display:inline;float:left;">生成成绩</h2>
					<button type="button" class="close" data-dismiss="modal" style="display:inline;float:right;">&times;</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-xs-12">
							<div class="build-excel-layer-title">
								<span style="white-space:pre;">  </span><span class="detail-title">请确认是否生成成绩？</span>  
							</div>
						</div>
						<div class="col-xs-12">
							<div class="form-group">
								<div class="row">
									<div class="col-xs-2"></div>
									<div class="col-xs-8">
										<label for="">生成成绩操作会重新计算任务成绩和平时成绩，这可能会导致部分数据丢失。您可以先导出成绩单再进行生成成绩操作。</label>
									</div>
									<div class="col-xs-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer" style="text-align:center;">
					<button type="button" id="cancel" class="btn btn-primary" style="margin-right: 2rem;">取消</button>
					<button type="button" id="confirm" class="btn btn-primary" style="margin-left: 2rem;">确认</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
var data=${data};
var courseId=data.data.courseId;
var taskList={};
var chooseTaskList=[];
$(document).ready(function(){
	if (data.status != "success"){
		alert(data.message);
		return;
	}
	$("#grade").css("color","#00b43c");
	changeUrl(data.data.courseId);
	fetchCourse(data.data.courseId);
	courseRate(data.data.view);
	$("#ttp-last-btn").click(function() {
		window.location.href = CONTEXT_PATH + "studentGradeView/listData?courseId=" + data.data.view.id;
	});
	$("#ttp-next-btn").click(doNextFourRatio);
	$("#confirm").click(returnLast);
});
var returnLast = function() {
	if($("#chooseTaskList tr").length==0) {
		layer.msg("请选择至少一个任务！");
		showSelectTask();
	} else {
		updateTaskGradeStatus();
	}
}
var doNextFourRatio = function() {
	var taskGradeRatio=parseInt($("input[name='taskGradeRatio']").val());
	var dailyGradeRatio=parseInt($("input[name='dailyGradeRatio']").val());
	var theoryGradeRatio=parseInt($("input[name='theoryGradeRatio']").val());
	var labGradeRatio=parseInt($("input[name='labGradeRatio']").val());
	var all=taskGradeRatio+dailyGradeRatio+theoryGradeRatio+labGradeRatio;
	if(all!=100) {
		layer.msg("请输入正确的成绩占比！");
	} else {
		showSelectTask();
		updateCourseRate();
	}
}
var courseRate = function(view){
	$("input[name='taskGradeRatio']").val(view.taskGradeRatio);
	$("input[name='dailyGradeRatio']").val(view.dailyGradeRatio);
	$("input[name='theoryGradeRatio']").val(view.theoryGradeRatio);
	$("input[name='labGradeRatio']").val(view.labGradeRatio);
}

var updateCourseRate = function (){
	var json={
		id:data.data.courseId,
		taskGradeRatio:$("input[name='taskGradeRatio']").val(),
		dailyGradeRatio:$("input[name='dailyGradeRatio']").val(),
		theoryGradeRatio:$("input[name='theoryGradeRatio']").val(),
		labGradeRatio:$("input[name='labGradeRatio']").val()
	};
	
	$.post(CONTEXT_PATH+"gradeView/updateCourseRate", {
		data : JSON.stringify(json)
	}, function(data) {
		if(data.status=="success"){
			//成功后获取任务列表
			getTaskList();
		}else{
			alert(data.message);
		}
	});
}

var getTaskList = function(){
	$.get(CONTEXT_PATH+"gradeView/getTaskList?courseId="+data.data.courseId, function(data) {
		if(data.status=="success"){
			taskList.homeworkList=data.data.homeworkList;
			taskList.labList=data.data.labList;
			taskList.testInLessonList=data.data.testInLessonList;
			initTaskList();
		}else{
			alert(data.message);
		};
	});
}


var initTaskList = function(){
	var initTaskList=$("#taskList");
	initTaskList.empty();
	var testInLessonList = taskList.testInLessonList;
	for(var i=0;i<testInLessonList.length;i++){
		var item=testInLessonList[i];
		var status=item.isAddToGrade=="YES"?"checked=\"checked\"":"";
		var s="<tr>";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+testInLessonList.length+"\" style=\"vertical-align: middle;\">当堂测试</td>";
			s+="<td><input type=\"checkbox\" name=\"testInLessonChoose\" value=\""+i+"\" "+status+" > <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}else{
			s+="<td><input type=\"checkbox\" "+status+"  name=\"testInLessonChoose\" value=\""+i+"\"> <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}
		s+="</tr>";
		initTaskList.append(s);
	}
	var homeworkList=taskList.homeworkList;
	for(var i=0;i<homeworkList.length;i++){
		var s="<tr>";
		var item=homeworkList[i];
		var status=item.isAddToGrade=="YES"?"checked=\"checked\"":"";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+homeworkList.length+"\" style=\"vertical-align: middle;\">课后作业</td>";
			s+="<td><input type=\"checkbox\" "+status+" name=\"homeworkListChoose\" value=\""+i+"\"> <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}else{
			s+="<td><input type=\"checkbox\" "+status+" name=\"homeworkListChoose\" value=\""+i+"\"> <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}
		s+="</tr>";
		initTaskList.append(s);
	}
	
	var labList=taskList.labList;
	for(var i=0;i<labList.length;i++){
		var item=labList[i];
		var s="<tr>";
		var status=item.isAddToGrade=="YES"?"checked=\"checked\"":"";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+labList.length+"\" style=\"vertical-align: middle;\">实验任务</td>";
			s+="<td><input type=\"checkbox\" "+status+" name=\"labListChoose\" value=\""+i+"\"> <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}else{
			s+="<td><input type=\"checkbox\" "+status+" name=\"labListChoose\" value=\""+i+"\"> <a title=\""+item.title+"\">"+item.title+"</a></td>";
		}
		s+="</tr>";
		initTaskList.append(s);
	}
}

var showChooseTask = function(){
	var testInLessons=[];
	$('input[name="testInLessonChoose"]:checked').each(function(){ 
		testInLessons.push($(this).val()); 
		});
	var homeworks=[];
	$('input[name="homeworkListChoose"]:checked').each(function(){ 
		homeworks.push($(this).val()); 
		});
	var labs=[];
	$('input[name="labListChoose"]:checked').each(function(){ 
		labs.push($(this).val()); 
		});
	
	chooseTaskList=[];
	
	var chooseList = $("#chooseTaskList");
	chooseList.empty();
	
	for(var i=0;i<testInLessons.length;i++){
		var item=taskList.testInLessonList[testInLessons[i]];
		chooseTaskList.push(item.id);
		var s="<tr for=\"task-1\">";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+testInLessons.length+"\" style=\"vertical-align: middle;\">当堂测试</td>";
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" type=\"text\" name=\"taskRate\" value=\""+item.ratio+"\" /> %</td>";
		}else{
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" type=\"text\" name=\"taskRate\" value=\""+item.ratio+"\" /> %</td>";
		}
		s+="</tr>";
		chooseList.append(s);
	}
	
	for(var i=0;i<homeworks.length;i++){
		var item=taskList.homeworkList[homeworks[i]];
		chooseTaskList.push(item.id);
		var s="<tr>";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+homeworks.length+"\" style=\"vertical-align: middle;\">课后作业</td>";
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" type=\"text\" name=\"taskRate\" value=\""+item.ratio+"\" /> %</td>";
		}else{
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" type=\"text\" name=\"taskRate\" value=\""+item.ratio+"\" /> %</td>";
		}
		s+="</tr>";
		chooseList.append(s);
	}
	
	for(var i=0;i<labs.length;i++){
		var item=taskList.labList[labs[i]];
		chooseTaskList.push(item.id);
		var s="<tr for=\"task-1\">";
		if(i==0){
			s+="<td class=\"task-type\" rowspan=\""+labs.length+"\" style=\"vertical-align: middle;\">实验任务</td>";
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" name=\"taskRate\" type=\"text\" value=\""+item.ratio+"\" /> %</td>";
		}else{
			s+="<td><a class=\"info-list-style\" title=\""+item.title+"\">"+item.title+"</a> <input id=\"task-1\" name=\"taskRate\" type=\"text\" value=\""+item.ratio+"\" /> %</td>";
		}
		s+="</tr>";
		chooseList.append(s);
	}
}

var updateTaskGradeStatus = function(){
	var taskRates=$("input[name='taskRate']");
	if(chooseTaskList.length!=taskRates.length){
		alert("前端数据出错，请刷新重试");
		return ;
	}
	var items=[];
	var rateSum = 0;
	for(var i=0;i<chooseTaskList.length;i++){
		
		var rate=taskRates[i].value;
		if(isEmpty(rate)){
			layer.msg("请输入任务成绩计算比例");
			return ;
		};
		var item={
			id:	chooseTaskList[i],
			rate:rate
		};
		items.push(item);
		rateSum+=parseInt(rate);
	}
	if(rateSum>100){
		layer.msg("任务占比设置错误！任务占比是该任务成绩占<-总任务成绩->的比例");
	}else{
		var json={
				courseId:data.data.courseId,
				item:items
		};

		$.post(CONTEXT_PATH+"gradeView/updateTaskGradeStatus", {
			data : JSON.stringify(json)
		},function(data) {
			if(data.status=="success"){
				genGrade();
			}else{
				alert(data.message);
			};
		});
	}
	return ;
}

var genGrade = function(){
	$.post(CONTEXT_PATH+"gradeView/genTaskGrade", {
		courseId : data.data.courseId
	},function(data) {
		if(data.status=="success"){
			window.location.href="<c:url value='/studentGradeView/listData?courseId="+courseId+"'/>";
		}else{
			alert(data.message);
		};
	});
}

var isEmpty=function(s){
	if(s==null||s=="" || s==undefined){
		return true;
	}
	return false;
};
</script>
</html>